<template>
	<view class="data">
		<navigator :url="'/pages/home/Details'" v-for="(item,index) in list1" :key="index">
			<view class="item">
				<view class="item-left">
					<image src="@/static/imgs/dianliang.png" alt="" style="height: 40rpx; width: 40rpx;" />
					<view style="margin-left: 20rpx;">低电量报警</view>
				</view>
				<view class="item-right">
					<view>{{formatTime(item.F_SensorDt)}}</view>
					<i class="iconfont icon-xiangyoujiantou" style="margin-left: 20rpx;"></i>
				</view>
			</view>
		</navigator>

		<navigator :url="'/pages/home/Details'" v-for="(item,index) in list2" :key="index">
			<view class="item">
				<view class="item-left">
					<image src="@/static/imgs/lixian.png" alt="" style="height: 40rpx; width: 40rpx;" />
					<view style="margin-left: 20rpx;">离线</view>
				</view>
				<view class="item-right">
					<view>{{formatTime(item.F_CreateTime)}}</view>
					<i class="iconfont icon-xiangyoujiantou" style="margin-left: 20rpx;"></i>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getEartag,
		getNecklace
	} from '@/utils/api/Home.js'
	import dayjs from 'dayjs'
	const list1 = ref(null)
	const list2 = ref(null)
	onMounted(async () => {
		try {
			const res1 = await getEartag()
			const res2 = await getNecklace()
			if (res1.code === 200) {
				list1.value = res1.data
			}

			if (res2.code === 200) { 
				list2.value = res2.data
			}
		} catch (error) {
			console.error('获取数据失败:', error)
		}
	})
	
	//日期转换函数
	const formatTime = (time) => {
	    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
	}
</script>

<style scoped>
	@import '@/static/iconfont/iconfont.css';

	.data {}

	.item {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e5e7eb;
	}

	.item-left {
		display: flex;
		align-items: center;
		margin-left: 40rpx;
	}

	.item-right {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}
</style>